<template>

    <div class="cardCollageSpecialList">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
            <el-scrollbar height="600px">
                <el-timeline>
                    <el-timeline-item v-for="(item, index) in form.cardCollageSpecialList"
                        :key="index + 'cardCollageSpecialList'" :timestamp="'特殊卡密' + Number(index + 1)" placement="top"
                        color="hotpink" icon="Basketball">
                        <el-form-item label="" label-width="0">
                            <addSpecialTableItem v-model="form.cardCollageSpecialList[index]" :itemInfo="item"
                                :teamList="teamList" :ref="'formItem' + index" :cardCategoryId="props.cardCategoryId"
                                @del="carmiListHandle(index, 'del')" :selectEdTeam="form.cardCollageSpecialList"
                                :isView="props.isView" :key="index + 'cardCollageSpecialListItem'" />
                        </el-form-item>
                    </el-timeline-item>
                </el-timeline>
            </el-scrollbar>
            <div align="center" style="margin-top: 10px;" v-if="!props.isView">
                <el-link type="success" @click="carmiListHandle('index', 'add')" style="color: hotpink">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    添加特殊卡密</el-link>
            </div>
            <div align="center" style="margin-top: 10px;">
                <el-button type="primary" @click="submit" v-if="!props.isView">确 定</el-button>
                <el-button @click="close">{{ props.isView ? '关 闭' : '取 消' }} </el-button>
            </div>
        </el-form>
    </div>
</template>
<script lang=ts setup>
const { proxy } = getCurrentInstance()
import { getCarmiGroupByType } from '@/api/workflow/category/index'
import addSpecialTableItem from './addSpecialTableItem.vue'
const data = reactive({
    form: {
        cardCollageSpecialList: [
            {
                id: undefined,
                cardCollageId: undefined, //拼团id
                cardCollageCode: undefined, //拼团编码
                carmiColor: undefined, //卡密颜色
                winCarmiId: undefined, //特殊卡密
                winCarmiDescribe: undefined, //特殊卡密描述
                cardTeamId: undefined, //球队id
                carmiProperty: undefined, //卡密属性
                carmiInfo: undefined, //卡密属性
                cardPlayerId: undefined,//球员id
                cardTeamName: undefined,
                playerName: undefined,
            }
        ],
    },
    rules: {},
})
const teamList = ref([])
const { form, rules } = toRefs(data)

const props = defineProps({
    cardCategoryId: {
        type: [String, Number],
        default: undefined,
    },
    arrayList: {
        type: Array,
        default: () => []
    },
    isView: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['close', 'submit'])


const getTeamList = (cardCategoryId?: string | number, type?: number | string, teamId?: string | number, playerId?: string | number) => {
    const query = {
        cardCategoryId: cardCategoryId,
        type: type,
        cardTeamId: teamId,
        playerId: playerId
    }
    getCarmiGroupByType(query).then(res => {
        teamList.value = res.data
    })
}

watch(() => props.cardCategoryId, (val) => {
    console.log(222);

    getTeamList(val, 1)
}, {
    deep: true,
    immediate: true,
})

const carmiListHandle = (index: number | string, operation: string) => {
    switch (operation) {
        case 'add':
            form.value.cardCollageSpecialList.push({
                id: undefined,
                cardCollageId: undefined, //拼团id
                cardCollageCode: undefined, //拼团编码
                carmiColor: undefined, //卡密颜色
                winCarmiId: undefined, //特殊卡密
                winCarmiDescribe: undefined, //特殊卡密描述
                cardTeamId: undefined, //球队id
                carmiProperty: undefined, //卡密属性
                carmiInfo: undefined, //卡密属性
                cardPlayerId: undefined,//球员id
                cardTeamName: undefined,
                playerName: undefined,

            });
            break;
        case 'del':
            if (form.value.cardCollageSpecialList.length === 1) {
                form.value.cardCollageSpecialList = [{
                    id: undefined,
                    cardCollageId: undefined, //拼团id
                    cardCollageCode: undefined, //拼团编码
                    carmiColor: undefined, //卡密颜色
                    winCarmiId: undefined, //特殊卡密
                    winCarmiDescribe: undefined, //特殊卡密描述
                    cardTeamId: undefined, //球队id
                    carmiProperty: undefined, //卡密属性
                    carmiInfo: undefined, //卡密属性
                    cardPlayerId: undefined,//球员id
                    cardTeamName: undefined,
                    playerName: undefined,
                }];
                return;
            }
            form.value.cardCollageSpecialList.splice(Number(index), 1);
            break;
        default:
            break;
    }
}


const close = () => {
    emit('close')
}
const submit = () => {
    let arr = []
    let arr1 = []
    if (form.value.cardCollageSpecialList.length > 0) {
        form.value.cardCollageSpecialList.forEach((item, index) => {
            if (proxy.$refs['formItem' + index][0].$refs.formRef) {
                arr1.push(proxy.$refs['formItem' + index][0].form)
                arr.push(
                    new Promise((resolve, reject) => {
                        proxy.$refs[`formItem${index}`][0].$refs.formRef.validate((valid: boolean) => {
                            if (valid) resolve(valid)
                        })
                    })
                )
            }
        })
    }
    Promise.all(arr).then(() => {
        const arr2 = arr1.map(item => {
            return {
                ...item,
            }
        })
        emit('submit', arr1)
    }).catch(() => {
        console.log('error');
    })
}
watch(() => props.arrayList, (val) => {
    if (val && val.length > 0) {
        form.value.cardCollageSpecialList = val.map((item: any) => ({
            id: undefined,
            cardCollageId: item.cardCollageId || undefined,
            cardCollageCode: item.cardCollageCode || undefined,
            carmiColor: item.carmiColor || undefined,
            winCarmiId: item.winCarmiId ? (item.winCarmiId) : undefined,
            winCarmiDescribe: item.winCarmiDescribe || undefined,
            cardTeamId: item.cardTeamId ? Number(item.cardTeamId) : undefined,
            carmiProperty: item.carmiProperty || undefined,
            carmiInfo: item.carmiInfo || undefined,
            cardPlayerId: item.cardPlayerId ? Number(item.cardPlayerId) : undefined,
            cardTeamName: item.cardTeamName || undefined,
            playerName: item.playerName || undefined,
        }));
    }
}, {
    deep: true,
    immediate: true,
})
</script>
<style lang="scss" scoped>
::v-deep(.el-scrollbar .el-scrollbar__wrap) {
    overflow-x: hidden;
}

::v-deep(.el-scrollbar__bar.is-horizontal) {
    display: none;
}
</style>
